<template>
	<view>
		<view class="dropdown border-tb">
			<view class="li m-icon m-icon-arrowdown" :class="m==index?'active':''" @click="mask(m)" v-for="(item, m) in list" v-if="m<3">{{item.ShowName}}</view>
			<view class="li m-icon m-icon-arrowdown" :class="3==index?'active':''" @click="mask(3)" v-if="list.length>3">高级</view>
		</view>
		<uni-transition :mode-class="['fade']" :styles="maskClass" :show="show" @click="onTap" ></uni-transition>
		<uni-transition :duration="200" :mode-class="modeClass" :styles="transfromClass" :show="show"  @click="onTap">
			<scroll-view class="box" scroll-y="true" @touchmove.stop.prevent="" @touchmove.stop="" @click.stop="" :class="index==m?'':'hidden'" v-for="(item, m) in list" v-if="m<3">
				<view class="line uni-icon border-b" :class="option.Selected?'active':''" @click="Check_One(item.ColumnValue,option.Key,true)" v-for="(option,n) in item.ItemList" v-if="item.Type==1 || item.Type==4 || item.Type==5">{{option.Value}}</view>
				<view class="output maxheight" v-if="item.Type==2 || item.Type==3 || item.Type==8 || item.Type==9">
					<view class="title">{{item.ShowName}}</view>
					<view class="input"><input type="text" :placeholder="'请输入'+item.ShowName" :value="item.MinValue" @input="InputChange($event,item.ColumnValue)"></input></view>
					<view class="clears" @click="clear($event,item.ColumnValue)">清空</view>
					<view class="search" @click="confirm">确定</view>
				</view>
				<view class="output maxheight" v-if="item.Type==6 || item.Type==7">
					<view class="title">{{item.ShowName}}</view>
					<view class="input">
						<view class="date">
							<picker mode="date" :value="Tools.toDate(item.MinValue,'')" @change="DateChange1($event,item.ColumnValue)">
								<view class="uni-input">{{Tools.toDate(item.MinValue,'请选择开始时间')}}</view>
							</picker>
						</view>
						<text class="zhi">至</text>
						<view class="date"> 
							<picker mode="date" :value="Tools.toDate(item.MaxValue,'')" @change="DateChange2($event,item.ColumnValue)">
								<view class="uni-input">{{Tools.toDate(item.MaxValue,'请选择结束时间')}}</view>
							</picker>
						</view>
					</view>
					<view class="clears" @click="clear($event,item.ColumnValue)">清空</view>
					<view class="search" @click="confirm">确定</view>
				</view>
			</scroll-view>
			<scroll-view class="box" scroll-y="true" @touchmove.stop.prevent="" @touchmove.stop="" @click.stop="" :class="index==3?'':'hidden'" v-if="list.length>3">
				<view class="panel">
				<template v-for="(item, m) in list" v-if="m>=3">
					<view class="output" v-if="item.Type==1 || item.Type==4 || item.Type==5">
						<view class="title">{{item.ShowName}}</view>
						<view class="checkbox">
							<view class="square" :class="option.Selected?'select':''" @click="Check_One(item.ColumnValue,option.Key,false)" v-for="(option,n) in item.ItemList">{{option.Value}}</view>
						</view>
					</view>
					<view class="output" v-if="item.Type==2 || item.Type==3 || item.Type==8 || item.Type==9">
						<view class="title">{{item.ShowName}}</view>
						<view class="input"><input type="text" :placeholder="'请输入'+item.ShowName" :value="item.MinValue" @input="InputChange($event,item.ColumnValue)"></input></view>
					</view>
					<view class="output" v-if="item.Type==6 || item.Type==7">
						<view class="title">{{item.ShowName}}</view>
						<view class="input">
							<view class="date">
								<picker mode="date" :value="Tools.toDate(item.MinValue,'')" @change="DateChange1($event,item.ColumnValue)">
									<view class="uni-input">{{Tools.toDate(item.MinValue,'请选择开始时间')}}</view>
								</picker>
							</view>
							<text class="zhi">至</text>
							<view class="date"> 
								<picker mode="date" :value="Tools.toDate(item.MaxValue,'')" @change="DateChange2($event,item.ColumnValue)">
									<view class="uni-input">{{Tools.toDate(item.MaxValue,'请选择结束时间')}}</view>
								</picker>
							</view>
						</view>
					</view>
				</template>
				</view>
			</scroll-view>
			<view class="confirms" @touchmove.stop.prevent="" @touchmove.stop="" @click.stop="" :class="showbar?'':'hidden'">
				<view class="right">
					<view class="clears" @click="clearAll()">清空</view>
					<view class="search" @click="confirm">确定</view>
				</view>
			</view>
		</uni-transition>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index:-1,
				show: false,
				showbar:false,
				maskClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 'calc( var(--window-top) + 52px + 80rpx )',
					'left': 0,
					'right': 0,
					'z-index':0,
					'background-color': 'rgba(0, 0, 0, 0.4)'
				},
				modeClass: ['slide-top'],
				
				transfromClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 'calc( var(--window-top) + 52px + 80rpx )',
					'left': 0,
					'right': 0,
					'z-index':0,
					/* #ifndef APP-NVUE */
					'display': 'flex',
					/* #endif */
					'justify-content': 'center',
					'align-items': 'center'
				}
			};
		},
		props:{
			list:{
				type:Array,
				default:[]
			}
		},
		created(){
			var index=0;
			this.list.forEach(item=>{
				var Selected=false;
				this.$set(item,"MinValue","");
				this.$set(item,"MaxValue","");
				item.ItemList.forEach(option=>{
					if(option.Selected && option.Key!=""){
						Selected=true;
						this.index=index;
						this.$set(item,"MinValue",option.Key);
						this.$set(item,"ShowName",option.Value);
					}
				});
				if(!Selected){
					this.$set(item,"ShowName",item.ColumnName);
				}
				
				index++;
			});
		},
		methods:{
			mask(index) {
				this.index=index;
				this.show = true;
				if(index==3){
					this.showbar=true;
				}else{
					this.showbar=false;
				}
			},
			onTap() {
				this.show = false;
			},
			confirm(){
				var ParamList=[];
				this.show = false;
				this.showbar = false;
				this.list.forEach(item=>{
					if(item.MinValue.trim()!=""){
						ParamList.push(item);
					}
				});
				this.$emit("confirm", {ParamList:ParamList});
			},
			clear(e, ColumnValue){
				this.list.forEach(item=>{
					if(item.ColumnValue==ColumnValue){
						item.MinValue="";
						item.MaxValue="";
					}
				});
			},
			clearAll(e){
				this.list.forEach((item,index)=>{
					if(index>=3){
						item.MinValue="";
						item.MaxValue="";
						item.ItemList.forEach(option=>{
							if(option.Key==""){
								option.Selected=true;
							}else{
								option.Selected=false;
							}
						});
					}
				});
				this.Util.Toast("清空成功");
			},
			Check_One(ColumnValue, Key, Close){
				this.list.forEach(item=>{
					if(item.ColumnValue==ColumnValue){
						item.ItemList.forEach(option=>{
							if(option.Key==Key){
								option.Selected=true;
								item.MinValue=option.Key;
								if(Close){
									if(option.Value=="全部"){
										item.ShowName=item.ColumnName;
									}else{
										item.ShowName=option.Value;
									}
								}
							}else{
								option.Selected=false;
							}
						});
					}
				});
				if(Close){
					this.show=false;
					this.confirm();
				}
			},
			DateChange1(e,ColumnValue){
				this.list.forEach(item=>{
					if(item.ColumnValue==ColumnValue){
						item.MinValue=e.detail.value;
					}
				});
			},
			DateChange2(e,ColumnValue){
				this.list.forEach(item=>{
					if(item.ColumnValue==ColumnValue){
						item.MaxValue=e.detail.value;
					}
				});
			},
			InputChange(e,ColumnValue){
				this.list.forEach(item=>{
					if(item.ColumnValue==ColumnValue){
						item.MinValue=e.detail.value;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.box{width:100%; height:auto; min-height:400rpx; max-height: calc(100vh - var(--window-top) - 52px - 80rpx ); position:absolute; top:0px; background:#ffffff; overflow-y:hidden; z-index:99;
		.line{width:100%; height:80rpx; line-height: 80rpx; padding-left:26rpx; padding-right:26rpx; display: flex; flex-direction: row; justify-content: space-between;}
		.line:active{background-color: $uni-active-color;}
		.active{color:$uni-blue-color;}
		.active:after{content:'\e472'; font-size:36rpx;}
		.output{width:100%; height:auto; padding:40rpx; position: relative;
			.title{height:30rpx; line-height: 30rpx; font-size:32rpx; border-left:2px solid $uni-blue-color; padding-left:10rpx;}
			.input{padding-left:10rpx; margin-top:40rpx; display: flex; flex-direction: row;
				.date{width:250rpx; font-size:32rpx; color:$uni-tip-color;}
				.zhi{width:75rpx; font-size:32rpx;}
				input{font-size:32rpx;}
			}
			.checkbox{width:100%; height:auto; display:flex; flex-direction: row; padding-left:10rpx; padding-top:20rpx; flex-wrap: wrap;
				.square{width:auto; height:50rpx; line-height:50rpx; padding-left:15rpx; padding-right:15rpx; background-color:$uni-active-color; margin-right: 15rpx; margin-bottom:15rpx; color:$uni-tip-color; border-radius:5rpx;}
				.select{background-color:$uni-blue-color; color:#ffffff;}
			}
			.search{width:120rpx; height:70rpx; line-height:70rpx; text-align:center; border-radius:6rpx; background-color: $uni-blue-color; color:#ffffff; position:absolute; right:40rpx; bottom:20rpx;}
			.search:active{opacity: 0.8;}
			.clears{width:120rpx; height:70rpx; line-height:70rpx; text-align:center; border-radius:6rpx; background-color: $uni-active-color; border:1rpx solid $uni-border-color; color:$uni-tip-color; position:absolute; right:190rpx; bottom:20rpx;}
			.clears:active{opacity: 0.6;}
		}
		.maxheight{height:400rpx;}
		.panel{
			padding-bottom:120rpx;
		}
	}
	.confirms{ width:100%; height:100rpx; background-color: #ffffff; position:fixed; bottom:0px; z-index:100;
		.right{width:330rpx; height:100%; padding-right:30rpx; margin-left:auto; display: flex; flex-direction: row; justify-content: space-around; align-items: center;
			.search{width:120rpx; height:70rpx; line-height:70rpx; text-align:center; border-radius:6rpx; background-color: $uni-blue-color; color:#ffffff; }
			.search:active{opacity: 0.8;}
			.clears{width:120rpx; height:70rpx; line-height:70rpx; text-align:center; border-radius:6rpx; background-color: $uni-active-color; border:1rpx solid $uni-border-color; color:$uni-tip-color; }
			.clears:active{opacity: 0.6;}
		}
	}
	.dropdown{width:100%; height:80rpx; background-color: #f1f1f1; display:flex; flex-direction: row; justify-content: space-around; position:relative; top:0px; z-index: 100;
		.li{height:80rpx; line-height: 80rpx; color:#000000; margin:0px; flex:0 0 auto; display:flex; flex-direction: row;}
		.active:after{transform-origin:50% 50%; transform: rotate(180deg); transition: transform 0.2s; display: inline-block;}
		.active{color:$uni-blue-color;}
	}
</style>
